<template>
    <div class="home">
        <div class="header-nav">
            <p>首页</p>
            <div class="nav">
                <div class="nav-item">
                    <span>学生人数</span>
                    <span>548</span>
                </div>
                <div class="nav-item">
                    <span>学科数目</span>
                    <span>3</span>
                </div>
                <div class="nav-item">
                    <span>教师人数</span>
                    <span>38</span>
                </div>
                <div class="nav-item">
                    <span>班级数目</span>
                    <span>42</span>
                </div>
            </div>
        </div>
        <div class="echart">

        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import { onMounted } from '@vue/runtime-core'
export default {
    setup(props) {
        const charInit=()=>{
            var myChart=echarts.init(document.querySelector('.echart'))
            var option = {
                title: {
                    text: '学生平均成绩分析'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                    }
                },
                legend: {
                    data: ['2017', '2018', '2019', '2020', '2021']
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    name: '2017',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [78, 88, 85, 90, 90, 67]
                    },
                    {
                    name: '2018',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [88, 58, 80, 70, 70, 67]
                    },
                    {
                    name: '2019',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [67, 78, 88, 67, 70, 55]
                    },
                    {
                    name: '2020',
                    type: 'line',
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [80, 67, 69, 94, 85, 76]
                    },
                    {
                    name: '2021',
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [66, 45, 89, 56, 77, 70]
                    }
                ]
                };
            myChart.setOption(option)
        }
        onMounted(()=>{
            charInit()
        })
    }
}
</script>
<style lang="scss" scoped>
.home{
    width: 100%;
    height: 100%;
    .header-nav{
        width: 100%;
        // height: 100px;
        .nav{
            width: 100%;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            .nav-item{
                width: 20%;
                background: #fff;
                color: #999;
                padding:  40px 0px;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
        }
    }
    .echart{
        width: 100%;
        height: 500px;
    }
}

    
</style>